<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#div1{width: 500px; height: 200px; background-color: #ccc; margin: 200px; border: 1px dashed #333;}
	</style>
	<script type="text/javascript">
	window.onload = function () {
		var oDiv = document.getElementById('div1');
		var oUl = document.getElementById('ul1');
/*
	FileReader()对象的方法：(需要new一个对象出来)
		1) readAsDataURL( 文件 )
		2) onload
			- 当读取文件成功完成的时候触发此事件
			- this.result。来获取读取的文件数据
*/
		oDiv.ondragenter = function () {
			this.innerHTML = '可以释放啦'
		}

		oDiv.ondragover = function () {		
			return false;
		}

		oDiv.ondragleave = function () {
			this.innerHTML = '将文件拖放至此区域';
		}

		oDiv.ondrop = function (ev) {					//要想触发drop事件，就必须在dragover事件中阻止默认行为
			var fs = ev.dataTransfer.files;				//文件内容		
				
			for (var i = 0; i < fs.length; i++) {		// for循环的应该是包着onload

				if ( fs[i].type.indexOf('image') != -1 ) {
					var fd = new FileReader();			//每次循环都创建一个新对象

					fd.readAsDataURL( fs[i] );			//读取文件，将文件读取为DataURL

					fd.onload = function () {			//成功读取文件时触发(所以它是不自带判断的)，由上一步为true时触发
						var oLi = document.createElement('li');
						var oImg = document.createElement('img');

						oImg.src = this.result;
						oLi.appendChild(oImg);
						oUl.appendChild(oLi);
					}

					oDiv.innerHTML = '将文件拖放至此区域';
				}else{
					alert('请选择图片类型的文件上传')
				};	
			}

			return false;		//阻止事件默认行为
		}

	}
	</script>
</head>
<body>
	<div id="div1">将文件拖放至此区域</div>
	<ul id="ul1"></ul>
</body>
</html>         